Skip to content

Keyboard 'tab' key navigation improved#4244

Merged
tdonohue merged 2 commits intoDSpace:mainfrom
oscar-escire:Issue/4201
May 1, 2025
Merged

Keyboard 'tab' key navigation improved#4244
tdonohue merged 2 commits intoDSpace:mainfrom
oscar-escire:Issue/4201

Conversation

@oscar-escire
Copy link
Copy Markdown
Contributor

References

Hi @tdonohue I've been working on this PR and i like to share it with you

Add references/links to any related issues or PRs. These may include:

Description

This PR improves tab navigation across the Dspace site, primarily targeting browsers like Safari that require explicit tags to properly detect the next focusable element.

Instructions for Reviewers

  1. Open DSpace on Safari desktop navigator
  2. Use tab to change between focusable elements
  3. All elements like links, inputs, buttons or checkboxes will be focusable and selectable with tab in default order

List of changes in this PR:

  • Added role tag to interactive elements
  • Added tabindex over interactive elements to enable focusable

Checklist

  • My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
  • My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
  • My PR passes ESLint validation using npm run lint
  • My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)
  • My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
  • My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
  • My PR aligns with Accessibility guidelines if it makes changes to the user interface.
  • My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
  • My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
  • If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
  • If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
  • If my PR fixes an issue ticket, I've linked them together.

@tdonohue tdonohue added accessibility 1 APPROVAL pull request only requires a single approval to merge labels Apr 24, 2025
@tdonohue tdonohue moved this to 🙋 Needs Reviewers Assigned in DSpace 9.0 Release Apr 24, 2025
@tdonohue tdonohue added the testathon Reported by a tester during Community Testathon label Apr 24, 2025
@tdonohue
Copy link
Copy Markdown
Member

@oscar-escire : Thanks! Sorry, I didn't realize you had started work on this. I had assigned this to @pcg-kk in today's Developers meeting to look into. But, maybe @pcg-kk could just help to review or test this PR instead.

I'll see if I can also find time to give this a try soon too.

@oscar-escire
Copy link
Copy Markdown
Contributor Author

Thanks @tdonohue, @pcg-kk I will be attentive to your comments.

@pcg-kk
Copy link
Copy Markdown
Contributor

pcg-kk commented Apr 25, 2025

@tdonohue I will make a review of that today - no problem 👍

Copy link
Copy Markdown
Contributor

@pcg-kk pcg-kk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR introduces significant improvements for Safari browser compatibility, addressing several rendering and functionality issues that were specific to this browser.

@pcg-kk
Copy link
Copy Markdown
Contributor

pcg-kk commented Apr 30, 2025

@tdonohue my approval doesn't change the review status and it's still required. Is it normal?

@tdonohue tdonohue moved this from 🙋 Needs Reviewers Assigned to 👍 Reviewer Approved in DSpace 9.0 Release Apr 30, 2025
@tdonohue
Copy link
Copy Markdown
Member

@pcg-kk : I've moved it manually to the "Reviewer Approved" status column. Unfortunately, GitHub doesn't always pickup approvals from everyone and move the PR appropriately on the board, so I occasionally have to move it manually. Thanks for your review/test. I'll give this a quick sanity check that it doesn't impact behavior on other browsers & then get it merged.

@tdonohue tdonohue changed the title tab navigation improved Keyboard 'tab' key navigation improved Apr 30, 2025
@tdonohue tdonohue added the port to dspace-8_x This PR needs to be ported to `dspace-8_x` branch for next bug-fix release label May 1, 2025
Copy link
Copy Markdown
Member

@tdonohue tdonohue left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Thanks @oscar-escire ! While I don't have Safari to test with, I tested this in a few other browsers (Chrome & Firefox) to ensure it has no negative side effects. The code also looks good to me.

Because this is an accessibility fix, it would be nice to see if this can be backported to 8.x and possibly 7.6.x. I've flagged it as such. However, it's possible it would need a manual backport.

@tdonohue tdonohue added the port to dspace-7_x This PR needs to be ported to `dspace-7_x` branch for next bug-fix release label May 1, 2025
@tdonohue tdonohue added this to the 9.0 milestone May 1, 2025
@tdonohue tdonohue merged commit 9a24fb2 into DSpace:main May 1, 2025
15 checks passed
@github-project-automation github-project-automation Bot moved this from 👍 Reviewer Approved to ✅ Done in DSpace 9.0 Release May 1, 2025
@dspace-bot
Copy link
Copy Markdown
Contributor

Backport failed for dspace-7_x, because it was unable to cherry-pick the commit(s).

Please cherry-pick the changes locally and resolve any conflicts.

git fetch origin dspace-7_x
git worktree add -d .worktree/backport-4244-to-dspace-7_x origin/dspace-7_x
cd .worktree/backport-4244-to-dspace-7_x
git switch --create backport-4244-to-dspace-7_x
git cherry-pick -x f8cfb74555894e8e5982d63bd3007bab19d4cd84 4e5b344ce8c5224713fde612b3440d0181871361

@dspace-bot
Copy link
Copy Markdown
Contributor

Backport failed for dspace-8_x, because it was unable to cherry-pick the commit(s).

Please cherry-pick the changes locally and resolve any conflicts.

git fetch origin dspace-8_x
git worktree add -d .worktree/backport-4244-to-dspace-8_x origin/dspace-8_x
cd .worktree/backport-4244-to-dspace-8_x
git switch --create backport-4244-to-dspace-8_x
git cherry-pick -x f8cfb74555894e8e5982d63bd3007bab19d4cd84 4e5b344ce8c5224713fde612b3440d0181871361

@tdonohue
Copy link
Copy Markdown
Member

tdonohue commented May 1, 2025

@oscar-escire : If you are willing/interested in backporting this to the dspace-8_x branch and/or dspace-7_x branch, I think this could be useful to backport manually (since the above automatic backports failed). If you don't have time though, that backport could wait on a willing volunteer.

@oscar-escire
Copy link
Copy Markdown
Contributor Author

Hello @tdonohue @pcg-kk thanks! I'be glad to work in the two branchs to backport this fix. I'll work on that and send it as soon as I have ready

@tdonohue tdonohue removed port to dspace-7_x This PR needs to be ported to `dspace-7_x` branch for next bug-fix release port to dspace-8_x This PR needs to be ported to `dspace-8_x` branch for next bug-fix release labels May 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

1 APPROVAL pull request only requires a single approval to merge accessibility bug testathon Reported by a tester during Community Testathon usability

Projects

No open projects
Status: ✅ Done

Development

Successfully merging this pull request may close these issues.

Tab navigation is not working correctly on Safari – only 3 elements receive focus

4 participants